<template>
  <v-app 
    id="login" 
    class="primary">
    <v-content>
      <v-container 
        fluid 
        fill-height>
        <v-layout justify-center>
          <v-flex
            offset-lg6
            xs12 
            sm6 
            md4 
            lg4>
            <v-card 
              class="login-card elevation-1 pa-3" 
              max-width="400">
              <v-card-text>
                <div class="layout column align-center">
                  <img 
                    src="/img/vuetify.png" 
                    alt="logo" 
                    width="80" 
                    height="80">
                  <h2 class="flex primary--text">趣创益</h2>
                </div>                
                <v-form>
                  <v-text-field 
                    v-model="model.username" 
                    append-icon="person" 
                    name="login" 
                    label="邮箱/手机" 
                    type="text"/>
                  <v-text-field 
                    id="password" 
                    v-model="model.password" 
                    append-icon="lock" 
                    name="password" 
                    label="密码" 
                    type="password"/>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-btn
                  color="success"
                  outline
                  small
                  icon
                  fab>
                  <v-icon>fa fa-weixin fa-lg</v-icon>
                </v-btn>
                <v-btn
                  color="info"
                  outline
                  small
                  icon
                  fab>
                  <v-icon>fa fa-qq fa-lg</v-icon>
                </v-btn>
                <v-spacer/>
                <v-btn 
                  :loading="loading" 
                  block 
                  color="primary" 
                  @click="login">登录</v-btn>
              </v-card-actions>
              
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import Jsencrypt from 'jsencrypt'
export default {
  layout: 'login',
  data: () => ({
    loading: false,
    model: {
      username: '191524221@qq.com',
      password: 'Password123'
    }
  }),

  methods: {
    async login() {
      this.loading = true
      let publicKey
      try {
        let res = await this.$axios.get('/api/common/token')
        publicKey = res.data
      } catch (error) {}
      let { username, password } = this.model
      let encrypt = new Jsencrypt()
      encrypt.setPublicKey(publicKey)
      password = encrypt.encrypt(password)
      try {
        await this.$auth.login({
          data: {
            username,
            password
          }
        })
      } catch (error) {
        this.$createSnackbar({
          text: error.message,
          type: 'error'
        }).show()
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped lang="stylus">
  #login 
    height: 50%;
    width: 100%;
    position: absolute;
    top: 56px;
    left: 0;
    content: "";
    z-index: 0;
  .login-card
    margin: 15vh auto 0;
</style>
